<template>
  <div class="main-page">
    <div class="page-title">
      {{ route.meta.title }}
    </div>
    <div class="search-box"></div>
    <div>
      <el-table :data="tableData">
        <el-table-column prop="classify_id" label="类别ID" width="180" />
        <el-table-column prop="classify_name" label="类别名称" width="180" />
        <el-table-column prop="created_time" label="创建时间" />
        <el-table-column prop="label" label="Label" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default>
            <el-button link type="primary" size="small" @click="onEdit"> 编辑 </el-button>
            <el-button link type="primary" size="small" @click="onDelete">删除</el-button>
            <el-button link type="primary" size="small" @click="onEnter">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
const route = useRoute();
const router = useRouter();
interface Row {
  classify_id: string;
  classify_name: string;
  created_time: string;
  total: number;
}

const tableData = ref<Row[]>([
  {
    classify_id: "20240108_001",
    classify_name: "风景照",
    created_time: "2024-01-08",
    total: 0,
  },
]);

/** 编辑类别信息 */
const onEdit = () => {};

/** 删除 */
const onDelete = () => {};

/** 进入图片中心 */
const onEnter = (row: Row) => {
  router.push(`/pictures_center?classify_id=${row.classify_id}`);
};
</script>
